<template>
  <!-- 2个展示 -->
  <div class="exhibit">
    <el-row :gutter="16">
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="23456">
            <template #title>
              <div class="box1">
                今日收入
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>比昨日 :</span>
              <span class="green">
                10%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="12345">
            <template #title>
              <div class="box1">
                昨日收入
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span class="span1">上月今日:</span>
              <span class="red">
                12%
                <el-icon>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="972000">
            <template #title>
              <div class="box1">
                今月收入
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>相比上月</span>
              <span class="green">
                16%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <h3>每日数据</h3>
  <div id="container" style="
      width: 80vw; 
      height: 70vh; 
      " />
</template>

<script lang= "ts" setup>
import { onMounted, } from 'vue';
import {
  CaretBottom,
  CaretTop,
} from '@element-plus/icons-vue'
import * as echarts from 'echarts';

onMounted(() => {
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById('container') as HTMLElement;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  let dataAxis = ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号','21号', '22号','23号','24号','25号','26号','27号','28号','29号','30号',];
  let data = [];
  for (let i = 0; i < 30; i++) {
  const num = Math.floor(Math.random() * 901) + 100;
  data.push(num);
  }
  let yMax = 1000;
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }

  option = {
    
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999'
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
        data: data
      }
    ]
  };

  // Enable data zoom when user click bar.
  const zoomSize = 6;
  myChart.on('click', function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
  });

  option && myChart.setOption(option);

  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }
})
</script>

<style lang= "less" scoped>
.exhibit {
  width: 100%;
  height: 24vh;
}

:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  transition: box-shadow 0.3s ease-in-out;
  background-color: #C8B8E9;
}

.statistic-card:hover {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .5), 0px 3px 6px rgba(0, 0, 0, .5);
}

.statistic-card .box1 {
  display: inline-flex;
  align-items: center;
  font-size: 25px !important;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:first-child {
  color: black;
  font-size: 16px;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 16px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}
</style>
